<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="0" style="width:110px">
            <img src="../assets/images/logo.png" id="u1425_img" />
          </el-menu-item>
          <el-menu-item v-for="item in dataMenu" :key="item.id" :index="item.path">{{item.title}}</el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="201px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                text-color="#333"
              >
                <el-submenu v-for="item in submenu2" :key="item.id" :index="item.path">
                  <template slot="title">
                    <i class="item.icon"></i>
                    <span>{{item.title}}</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title"></template>
                    <el-menu-item
                      v-for="item in submenu3"
                      :key="item.id"
                      :index="item.path"
                      @click="routerElMain(item.url)"
                      text-color="#fff"
                    >{{item.title}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '',
      dataMenu: [], // 一级
      submenu2: [], // 二级
      submenu3: [] // 三级
    }
  },
  methods: {
    routerElMain (url) {
      this.$router.push('/main' + url)
    },
    // 点击一级菜单
    handleSelect (key, keyPath) {
      this.submenu2 = []
      localStorage.setItem('activeIndex', key)
      this.forMenu(this.dataMenu, key)
    },
    // 点击二级菜单
    handleOpen (key, keyPath) {
      this.submenu3 = []
      this.forMenu(this.submenu2, key)
    },
    forMenu (menu, key) {
      menu.forEach(element => {
        if (element.path === key) {
          if (element.children.length > 0) {
            element.children.forEach(element2 => {
              var string = key.split('-')
              if (string.length === 2) {
                this.submenu3.push(element2)
              } else {
                this.submenu2.push(element2)
              }
            })
          }
        }
      })
    }
  },
  async created () {
    const activeIndex = localStorage.getItem('activeIndex')
    if (activeIndex == null) {
      this.activeIndex = '1'
    } else {
      this.activeIndex = activeIndex
    }
    const { data: res } = await this.$http.get('/systems/menu/findAllMenu')
    this.dataMenu = res.data
    // 传入全部菜单集合
    this.forMenu(this.dataMenu)
    this.handleSelect(activeIndex)
  }
}
</script>

<style scoped>
#u1425_img {
  border-width: 0px;
  position: absolute;
  left: 20px;
  top: 17px;
  width: 68px;
  height: 24px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 100px; /*656px*/
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}
.el-menu-item.is-active {
  background-color: #3370ff !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
</style>
